<template>
  <div class="wrapper confirm-wrap">
    <div class="confirm-tit">
      <span class="tit">选择收货地址 :</span>
    </div>
    <div class="confirm-address clearfix">
      <div v-for="address in addressList" class="col col-4" :key="address.addressId" @click="setAddressId(address.addressId)">
        <div :class="{item: true, active: addressId === address.addressId}">
          <div class="info">
            <div class="ellipsis"><img src="img/ico/user.jpg" alt="" />{{address.addressName}} 收</div>
            <div class="ellipsis"><img src="img/ico/dizhi.jpg" alt="" />{{address.addressDescribe}}</div>
            <div class="ellipsis"><img src="img/ico/tel.jpg" alt="" />{{address.addressPhone}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="confirm-tit">
      <span class="tit">确认商品信息:</span><div class="right"><a class="back" href="">返回购物车></a></div>
    </div>
    <div class="confirm-goods">
      <div class="confirm-goods-hd clearfix">
        <div class="col col1">商品</div>
        <div class="col col2">单价（元）</div>
        <div class="col col3">数量</div>
        <div class="col col4">小计（元）</div>
      </div>
      <div v-for="(item, $index) in list" class="confirm-goods-bd" :key="item.commodityId">
        <div class="goods clearfix">
          <div class="col col1">
            <img :src="item.commodityImgurl" alt="">
            <div class="info">
              <div class="name">{{item.commodityName}}</div>
              <!--<div class="meta"><span>黑色</span><span>S</span></div>-->
            </div>
          </div>
          <div class="col col2">￥{{item.commodityPrice}}</div>
          <div class="col col3">{{commodityList[$index].commodityNum}}</div>
          <div class="col col4">￥{{item.commodityPrice * commodityList[$index].commodityNum}}</div>
        </div>
      </div>
    </div>
    <div class="confirm-total">
      <div class="box">
        <div class="item">应付总额：<strong> ¥ {{total}}</strong></div>
        <a class="ui-btn-theme go-charge" @click="goPay()">去结算</a>
      </div>
    </div>
  </div>
</template>
<script>
import http from '../../../base/api/http'
export default {
  name: 'ConfirmWrapper',
  data () {
    return {
      addressList: [],
      addressId: 0,
      commodityList: [],
      list: []
    }
  },
  methods: {
    findAddress () {
      http.requestQuickGet('/java/api/address/getAddressList').then((res) => {
        if (res.status === 0) {
          this.addressList = res.data
        }
      })
    },
    setAddressId (id) {
      this.addressId = id
    },
    findCommodity () {
      let commodityIds = []
      for (let i = 0; i < this.commodityList.length; i++) {
        commodityIds.push(this.commodityList[i].commodityId)
      }
      console.log(commodityIds)
      http.requestPost('/java/api/commodity/toOrder', commodityIds).then((res) => {
        if (res.status === 0) {
          this.list = res.data
        }
      })
    },
    cartGet (list) {
      http.requestPost('/java/api/cart/toOrder', list).then((res) => {
        if (res.status === 0) {
          this.commodityList = res.data
          this.findCommodity()
        }
      })
    },
    goPay () {
      http.requestPost('/java/api/pay/addOrder', {
        'vo': this.commodityList,
        'addressId': this.addressId
      }).then((res) => {
        if (res.status === 0) {
          this.$router.push({path: '/pay', query: { orderId: res.data }})
        }
      })
    }
  },
  computed: {
    total: function () {
      let total = 0
      for (let i = 0; i < this.list.length; i++) {
        total = total + this.list[i].commodityPrice * this.commodityList[i].commodityNum
      }
      return total
    }
  },
  mounted () {
    let type = this.$route.query.type
    if (type === 'cart') {
      let query = this.$route.query.data
      this.cartGet(query)
    }
    if (type === 'commodity') {
      this.commodityList.push(this.$route.query.data)
      this.findCommodity()
    }
    this.findAddress()
  }
}
</script>
<style>
</style>
